<template>
  <el-container>
    <el-header class="teacher-header" height="80px">
      <el-input class="phoneinput" placeholder="在全部课程里面查询" v-model.lazy="value5">
        <svg slot="prefix" class="icon" aria-hidden="true">
          <use xlink:href="#iconsousuo" />
        </svg>
      </el-input>
    </el-header>
    <el-container>
      <el-aside width="274px">
        <div class="bg-white teacher-scroll">
          <h3 class="text-center">
            <img src="https://cdn.hterobot.com/vue/teacher/image/%E7%9B%AE%E5%BD%95.png" alt srcset />
          </h3>
          <el-tree
            id="tree"
            :data="data"
            node-key="ID"
            :default-expand-all="false"
            :props="defaultProps"
            @node-click="getdata"
            :highlight-current="true"
            :accordion="true"
            :indent="30"
          ></el-tree>
        </div>
      </el-aside>
      <el-main class="teacher-scroll main" :class="!teacherproposalid?'teacher-main':''">
        <h5 class="text-left teacher-h4" v-show="teacherproposalid">{{teacherproposalname}}</h5>
        <div class="text-justify" v-for="(v, i) in pageTableData" :key="`${i}teacherdata3`">
          <a target="_blank" :href="href(v)">
            <el-container>
              <el-aside class="teacher-work" width="64px">
                <svg class="icon" v-show="v.isdown" aria-hidden="true">
                  <use xlink:href="#iconicon-work" />
                </svg>
                <svg class="icon" v-show="!v.isdown" aria-hidden="true">
                  <use v-if="v.types==='视频课程'" xlink:href="#iconicon-video" />
                  <use v-else xlink:href="#iconicon-ppt" />
                </svg>
              </el-aside>
              <el-main class="main teacher-main-0">
                <div class="float-left text-dark">{{v.name}}</div>
                <div class="float-right">
                  <svg class="icon" v-show="v.isdown" aria-hidden="true">
                    <use xlink:href="#iconxiazai" />
                  </svg>
                  <svg class="icon" v-show="!v.isdown" aria-hidden="true">
                    <use xlink:href="#iconchakan" />
                  </svg>
                </div>
              </el-main>
            </el-container>
          </a>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { mapGetters } from "vuex";
import { uniq } from "underscore";
export default {
  name: "teacherdata",
  computed: {
    ...mapGetters(["getuser", "getTeacherproposal", "getTpdata"]),
    data() {
      const { getTeacherproposal } = this;
      function a(x, id) {
        let arr = [];
        for (let v in x) {
          if (x[v].pid == id) {
            x[v].children = uniq(a(x, x[v].ID));
            if (
              x[v].children.length ||
              x[v].tpdata.find(v => v.usertotpdata.length)
            ) {
              arr.push(x[v]);
            }
          }
        }
        return arr;
      }
      return a(getTeacherproposal);
    },
    pageTableData() {
      const { value, tpdata, value5, getuserTpdata } = this;
      if (value5) {
        return getuserTpdata.filter(v => v.name.includes(value5));
      }
      return tpdata.filter(
        v => v.usertotpdata.length && v.name.includes(value)
      );
    },
    getuserTpdata() {
      const { getTeacherproposal } = this;
      const data = [];
      getTeacherproposal.forEach(vo => {
        if (vo.children.length || vo.tpdata.find(v => v.usertotpdata.length)) {
          const { tpdata } = vo;
          data.push(...tpdata);
        }
      });
      return data;
    }
  },
  data() {
    return {
      value: "",
      value5: "",
      order: false,
      defaultProps: {
        children: "children",
        label: "name"
      },
      teacherproposalid: 0,
      teacherproposalname: "",
      tpdata: []
    };
  },
  methods: {
    href(v) {
      console.log(v);
      if (v.isdown) {
        return v.fileurl;
      }
      if (v.types !== "视频课程") {
        return `/wordliulan.html?ID=${v.ID}`;
      }
      return `/teachervideo.html?ID=${v.ID}`;
    },
    getdata({ ID, children, name, tpdata }) {
      if (children.length) return;
      this.teacherproposalid = ID;
      this.teacherproposalname = name;
      this.tpdata = tpdata;
    }
  }
};
</script>

<style>
#tree .el-tree-node.is-current > .el-tree-node__content {
  background-color: rgba(230, 247, 255, 1);
  border-right: 4px solid #3e8ef7;
}
#tree .el-tree-node__content {
  height: 48px;
}
.phoneinput input {
  border-radius: 24px !important;
  height: 48px !important;
}
.phoneinput .el-input__prefix {
  line-height: 48px;
}
</style>

<style  scoped>
.teacher-aside {
  padding-top: 30px;
}
.teacher-scroll {
  max-height: 700px;
  min-height: 450px;
  overflow-y: scroll;
}
.teacher-scroll::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
.phoneinput {
  margin-top: 16px;
  margin-bottom: 16px;
  width: 272px;
}
.teacher-header {
  padding-left: 0;
}
.main {
  padding-top: 0;
  padding-bottom: 0;
}

.teacher-main {
  background-image: url(http://cdn.hterobot.com/vue/teacher/image/main_ikon.png);
  background-repeat: no-repeat;
  background-position: center;
}

.teacher-work {
  width: 64px;
  height: 64px;
  background: rgba(224, 247, 255, 1);
  border-radius: 6px;
  line-height: 64px;
}
.teacher-work .icon {
  display: block;
  height: 64px;
  font-size: 24px;
  margin: 0px auto;
}

.float-right .icon {
  display: block;
  height: 42px;
  line-height: 42px;
  font-size: 24px;
  background-color: #f5f5f5;
  margin: 10px auto;
  padding: 0px 10px;
  border-radius: 50%;
  width: 42px;
}

.teacher-h4::before {
  content: "●";
  color: #3e8ef7;
  padding-right: 15px;
}
.text-justify a {
  display: block;
  line-height: 64px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.teacher-main-0 .float-right {
  width: 74px;
}
.teacher-main-0 {
  transition: all 0.3s ease-in-out;
  background-color: #ffffff;
}
.teacher-main-0:hover {
  background-color: #e6f7ff;
}
</style>